<template>
	<view class="swiperBox" :style="'height:' + wagesheight + 'px;'">
		<swiper class="swiperContainer" :interval="3000" :duration="1000" @change="changeIndex">
			<swiper-item>
				<image class="swiperItem" src="../../../static/guide_2.png" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiperItem" src="../../../static/guide_3.png" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiperItem" src="../../../static/guide_1.png" mode="widthFix"></image>
				<view class="btn showBtnBackColor" @click="btnClick">
					立即体验
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wagesheight:900
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res)=>{
					console.log('ee',res.windowWidth,res.windowHeight)
					this.wagesheight = res.windowHeight
				}
			})
		},
		methods: {
			changeIndex(){
				
			},
			btnClick(){
				
				uni.navigateBack({
					delta:1
				})
			}                                                                                                                                                                                                                                          
		}
	}
</script>

<style>
		
	page{
		height: 100%;
	}
     .swiperContainer {
		width: 100%;
		height: 1200rpx;
	}

	.swiperBox .swiperContainer .swiperItem {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.swiperBox .swiperContainer .swiperItem image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.btn{
		position: absolute;
		
		bottom: 100rpx;
		left: 275rpx;
		color: #fff;
		/* background-color: #dd524d; */
		height: 80rpx;
		width: 200rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		/* margin: 20rpx 40rpx; */
		font-size: 32rpx;
		text-align: center;
		
	}
</style>
